<template>
  <!--  打卡-->
  <view v-if="index == 0">
    <HeaderNavTabarVue :iconFont="'icon-shuaxin'" title="打卡" @rightIcon="handleRefresh" />
    <view v-if="!showSuccess">
      <StepsContainer
        @openSuccessView="openSuccessView"
        @showSuccessFn="showSuccessFn"
        @updateAttendance="handleRefresh"
      />
    </view>
    <view v-else class="successContainer">
      <view class="imageContainer">
        <image src="@/static/images/successImage.png" style="width: 448rpx; height: 434rpx" />
      </view>
      <text class="text1">打卡成功 {{ dayjs().format('HH:mm') }}\n</text>
      <text class="text2">让我们开启元气满满的一天吧</text>
      <button class="buttonClass" @click="Ikonw">我知道了</button>
    </view>
  </view>
  <!--  申请-->
  <view v-if="index == 1">
    <HeaderNavTabarVue title="申请" />
    <ApplicationPage />
  </view>
  <!--  统计-->
  <view v-if="index == 2">
    <StatisticPage />
  </view>
  <!--  设置-->
  <view v-if="index == 3">
    <SettingPage @removeBottomNaviBar="removeBottomNaviBar" />
  </view>
  <uv-tabbar
    v-show="showBottonNaviBar"
    :value="index"
    active-color="#165DFF"
    inactive-color="#86909C"
    @change="tabChange"
  >
    <uv-tabbar-item text="打卡">
      <template v-slot:inactive-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/daka.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
      <template v-slot:active-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/daka-active.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item text="申请">
      <template v-slot:inactive-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/shenqing.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
      <template v-slot:active-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/shenqing-active.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item text="统计">
      <template v-slot:inactive-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/tongji.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
      <template v-slot:active-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/tongji-active.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
    </uv-tabbar-item>
    <uv-tabbar-item text="设置">
      <template v-slot:inactive-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/shezhi.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
      <template v-slot:active-icon>
        <image
          class="icon"
          src="@/static/icon/attendanceTabbar/shezhi-active.svg"
          style="width: 40rpx; height: 40rpx"
        ></image>
      </template>
    </uv-tabbar-item>
  </uv-tabbar>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import StepsContainer from '@/components/attendanceComponents/index.vue'
import SettingPage from '@/components/attendanceComponents/SettingPage/index.vue'
import StatisticPage from '@/components/attendanceComponents/StatisticPage/index.vue'
import ApplicationPage from '@/components/attendanceComponents/ApplicationPage/index.vue'
import dayjs from 'dayjs'

const showBottonNaviBar = ref(true)
const removeBottomNaviBar = (val) => {
  showBottonNaviBar.value = val
}

const showSuccessFn = (val) => {
  showSuccess.value = val
}

const openSuccessView = () => {
  showSuccess.value = true
}
onLoad(() => {})

const times = ref(null)
const Ikonw = () => {
  showSuccess.value = !showSuccess.value
  times.value = dayjs()
}

const showSuccess = ref(false)
const index = ref(0)
const tabChange = (e) => {
  index.value = e
  showSuccess.value = false
}

const handleRefresh = () => {
  uni.switchTab({
    url: '/pages/work/index',
  })
  setTimeout(() => {
    uni.navigateTo({
      url: '/pages/attendance/attendancePage',
      animationType: 'none',
    })
  })
}
</script>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

body {
  background-color: $uni-bai;
}

.spaceClass {
  height: 92rpx;
  color: $uni-bai;
}

.successContainer {
  width: 686rpx;
  //height: 1134rpx;
  flex-shrink: 0;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0 4rpx 16rpx 0 #0000000d;
  margin: 40rpx 32rpx 0rpx 32rpx;
  padding: 118rpx 0rpx 40rpx 0rpx;
  text-align: center;

  .imageContainer {
    width: 448rpx;
    height: 434rpx;
    flex-shrink: 0;
    margin: 0rpx 118rpx 88rpx 120rpx;
  }
}

.buttonClass {
  display: flex;
  padding: 23rpx 32rpx;
  justify-content: center;
  align-items: center;
  gap: 8rpx;
  align-self: stretch;
  border-radius: 8rpx;
  border: 2rpx solid var(---fill-3, #e5e6eb);
  width: 622rpx;
  height: 90rpx;
  background-color: #ffffff;
}

.text1 {
  align-self: stretch;
  color: #1d2129;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 40rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 56rpx;
}

.text2 {
  align-self: stretch;
  color: #86909c;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 30rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 42rpx;
  display: block;
  margin-top: 24rpx;
  margin-bottom: 172rpx;
}
</style>
